CSS Clamp Calculator

Enter your desired minimum and maximum value at their respective viewport widths to calculate the CSS clamp() value.

Minimum Window Width (px):

Maximum Window Width (px):

Minimum Value (px):

Maximum Value (px):

Calculated CSS clamp() value:

Click "Calculate" to see the result.

For example the value is used for font size.

Current Viewport Width: 0px

Current Font Size (of Preview Text): 0px

This is a preview text. Resize your browser window to see the font size change dynamically based on the clamp() function!

This calculator generates a clamp() value for fluid font sizing, ensuring it stays within your defined min/max limits while scaling responsively across different screen sizes.

0px

360px

1200px

1920px

Based on window width
( current window based value 0 )

Select CSS Property

The one line code ( For all media devices ):

font-size: ;

The one line code explanation :

@media only screen and (min-width: 1201px) {
font-size: 40px;
}

@media onlyscreen and (min-width: 361px) and (max-width: 1200px) {
// Based on window width using formula
//  
// If you want to check resize the window width below 1200px you will see changes 
font-size: 0;
}

@media only screen and (max-width: 360px) {
font-size: 24px;
}

Before using clamp() old method responsive:

// Above window width 1200px to large devices
font-size: 40px;

@media only screen and (max-width: 1199px) {
font-size: 1199px;
}

@media only screen and (max-width: 991px) {
font-size: 991px;
}

@media only screen and (max-width: 767px) {
font-size: 767px;
}

@media only screen and (max-width: 575px) {
font-size: 575px;
}

@media only screen and (max-width: 412px) {
font-size: 412px;
}

@media only screen and (max-width: 360px) {
font-size: 24px;
}